<template>
  <div class="deve">
    <div class="first-place">
      <div class="texts">
        <div>
          重&nbsp;&nbsp;中&nbsp;&nbsp;之&nbsp;&nbsp;重&nbsp;&nbsp;开&nbsp;&nbsp;发&nbsp;&nbsp;区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;唯&nbsp;&nbsp;此&nbsp;&nbsp;为&nbsp;&nbsp;大&nbsp;&nbsp;上&nbsp;&nbsp;项&nbsp;&nbsp;目
        </div>
      </div>
      <div class="search">
        <input type="text" v-model="firm" />
        <span @click="firmSelect"> 搜&nbsp;索 </span>
      </div>
    </div>
    <div id="container"></div>
    <div class="second-place">
      <div style="width: 24%" :class="{ textok: state == 0 }">
        <img :class="{ yanshi: state == 0 }" src="../assets/imgs/hx.png" style="width: 94%; height: 90%" alt=""
          @click="stateUpdate(0, '核心区产业园区')" />
        <h3>核心区产业园区</h3>
      </div>

      <div style="width: 25%" :class="{ textok: state == 1 }">
        <img :class="{ yanshi: state == 1 }" src="../assets/imgs/ncpjgy.png" style="width: 95%; height: 90%" alt=""
          @click="stateUpdate(1, '农产品加工园区')" />
        <h3>农产品加工园区</h3>
      </div>
      <div style="width: 25%" :class="{ textok: state == 2 }">
        <img :class="{ yanshi: state == 2 }" src="../assets/imgs/xxjc.png" style="width: 95%; height: 90%" alt=""
          @click="stateUpdate(2, '新型建材与家居园区')" />
        <h3>新型建材与家居园区</h3>
      </div>
      <div style="width: 25%" :class="{ textok: state == 3 }">
        <img :class="{ yanshi: state == 3 }" src="../assets/imgs/qchzy.png" style="width: 95%; height: 90%" alt=""
          @click="stateUpdate(3, '汽开合作园区')" />
        <h3>汽开合作园区</h3>
      </div>
      <img class="img1" src="../assets/imgs/左箭头.png" @click="calculate('-1')" alt="" />
      <img class="img2" src="../assets/imgs/右箭头.png" @click="calculate('+1')" alt="" />
    </div>
  </div>
</template>
<script setup>
import { GetData } from "@/api";
import { onMounted, ref, onBeforeUnmount, shallowRef } from "vue";
// 搜索
const firm = ref("");
// 经度
const longitude = ref(40.22077);
// 纬度
const latitude = ref(116.23128);
// 地图默认显示
const title = ref("核心区产业园区");
const data = ref([]);
var state = ref(0);

// 地图实例
var map = shallowRef(null);
var stateUpdate = (data, name) => {
  console.log(name);
  title.value = name;
  state.value = data;
  getData();
};
const calculate = (states) => {
  if (states == "+1") {
    if (state.value == 3) {
      state.value = 0;
    } else {
      state.value += 1;
    }
  } else {
    if (state.value == 0) {
      state.value = 3;
    } else {
      state.value -= 1;
    }
  }
  const arr = [
    "核心区产业园区",
    "农产品加工园区",
    "新型建材与家居园区",
    "汽开合作园区",
  ];
  title.value = arr[state.value];
  getData();
};

// 初始化地图
const initMap = () => {
  map = new AMap.Map("container", {
    resizeEnable: true,
    viewMode: "2D",
    zoom: 18,
    center: [latitude.value, longitude.value],
    // center: [116.39, 39.9],
  });
  var icon = new AMap.Icon({
    image: require("../assets/imgs/bj.png"),
    anchor: "center",
  });
  var marker = new AMap.Marker({
    map,
    position: [latitude.value, longitude.value],
    offset: new AMap.Pixel(-20, -25),
    icon: icon,
  });
  marker.setzIndex(100)
  var text = new AMap.Text({
    text: `
      <div class="bot" style="border-width: 20px;border-style: solid dashed dashed;
      border-color: red transparent transparent; left: 140px;bottom: -40px;width: 0;height: 0;
      font-size: 0;overflow: hidden;position: absolute;"> </div>
      <div class="top" style="border-width: 20px; border-style: solid dashed dashed;
      border-color: #ffffff transparent transparent;left: 140px;bottom: -37px;width: 0;height: 0;font-size: 0;
      overflow: hidden;position: absolute;"> </div>
      ${title.value}
`,
    anchor: "center", // 设置文本标记锚点
    offset: [20, -45],
    style: {
      width: "14rem",
      padding: ".75rem 1.25rem",
      background: "#fff",
      border: "2px solid red",
      "margin-top": "10px",
      'text-align': 'center',
      color: 'red',
      'font-weight': 'bolder'
    },
    position: [latitude.value, longitude.value],
  });
  text.setMap(map);
};

// 根据企业搜索
const firmSelect = async () => {
  console.log(firm.value);
  const res = await GetData(`/getFirmList?firmName=${firm.value}`);
  console.log(res[0].longitude, 11);
  longitude.value = res[0].dimension;
  latitude.value = res[0].longitude;
  title.value = res[0].firmName;
  console.log(res[0]);
  initMap();
};

const getData = async () => {
  const res = await GetData(`/getTypeList?type=QYT&name=${title.value}`);
  longitude.value = res[0].longitude;
  latitude.value = res[0].latitude;
  data.value = res;
  console.log(data.value[0]);
  initMap();
};

onMounted(() => {
  getData();
});

onBeforeUnmount(() => {
  map.destroy();
});
</script>
<style lang="less" scoped>
.deve {
  height: 100%;
  width: 99%;

  // background: red;
  .first-place {
    display: flex;
    justify-content: space-between;
    height: 5%;
    margin-bottom: 1%;

    .texts {
      width: 49%;
      font-size: 1.3vw;
      text-align: center;
      height: 100%;
      line-height: 4vh;
      display: flex;

      div:first-child {
        width: 50%;
        text-align: right;
        background-image: linear-gradient(to right,
            rgba(255, 0, 0, 0),
            rgb(220, 220, 220, 0.8));
      }

      div:last-child {
        text-align: left;
        width: 50%;
        background-image: linear-gradient(to left,
            rgba(255, 0, 0, 0),
            rgba(220, 220, 220, 1));
      }
    }

    .search {
      width: 280px;
      background-image: url(../assets/imgs/sousuoback.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;

      input {
        margin-top: 3%;
        margin-left: 11%;
        width: 55%;
        height: 58%;
        border: none;
        outline: none;
      }

      span {
        margin-left: 10%;
        color: white;
      }
    }
  }

  .second-place {
    margin-top: 1%;
    height: 23%;
    width: 99%;
    background: rgba(151, 230, 240, 0.699);
    padding: 1%;
    padding-right: 0;
    display: flex;
    position: relative;

    div {
      h3 {
        width: 95%;
        text-align: center;
      }
    }

    .img1 {
      position: absolute;
      left: -0.8%;
      top: 40%;
      width: 40px;
      height: 40px;
    }

    .img2 {
      position: absolute;
      right: -0.8%;
      top: 40%;
      width: 40px;
      height: 40px;
    }
  }
}

#container {
  width: 99.5%;
  height: 65%;
  border: 5px solid rgb(0, 174, 255);
}

.yanshi {
  border: 5px solid rgb(0, 174, 255);
  box-sizing: border-box;
}

.textok {
  color: rgb(0, 174, 255);
}

.test1 {
  width: 300px;
  padding: 30px 20px;
  border: 5px solid #beceeb;
  position: relative;
  margin-top: 10px;
}

.test1 div {
  width: 0;
  height: 0;
  font-size: 0;
  overflow: hidden;
  position: absolute;
}

.test1 div.bot {
  border-width: 20px;
  border-style: solid dashed dashed;
  border-color: #beceeb transparent transparent;
  left: 200px;
  bottom: -40px;
}

.test1 div.top {
  border-width: 20px;
  border-style: solid dashed dashed;
  border-color: #ffffff transparent transparent;
  left: 200px;
  bottom: -33px;
}
</style>